﻿@{
    ViewBag.Title = "体验记录";
}
@section headerSection{
    <style>
        #exampleToolbar > .form-group {
            float: left;
            margin: 0;
            margin-left: 5px;
        }
    </style>
}
<div class="animated fadeInRight">
    <!-- Panel Other -->
    <div class="ibox float-e-margins" style="margin-bottom: 0px;">
        <div class="ibox-content" style="padding: 5px 20px 0px 20px;">
            <div class="row row-lg">
                <div class="col-sm-12 col-sm-leftRight">
                    <!-- Example Toolbar -->
                    <div class="example">
                        <div class="btn-group hidden-xs" id="exampleToolbar" role="group">
                            <button id="experDel" type="button" class="btn btn-outline btn-danger">
                                <i class="glyphicon glyphicon-trash" aria-hidden="true">删除</i>
                            </button>
                            <div class="form-group" style="margin-left:0;width:110px;">
                                <input id="userName" name="userName" type="text" class="form-control" placeholder="用户名">
                            </div>
                            <div class="form-group" style="width:110px;">
                                <input id="fileName" name="fileName" type="text" class="form-control" placeholder="作品名称">
                            </div>
                            <div class="form-group" style="width:110px;">
                                <input id="fileCode" name="fileCode" type="text" class="form-control" placeholder="作品代码">
                            </div>
                            <div class="form-group">
                                <button id="btnSearch" class="btn btn-primary" type="button"><i class="fa fa-search"></i>&nbsp;查询</button>
                            </div>
                        </div>
                        <table id="exampleTableToolbar" data-mobile-responsive="true" data-radio="true"></table>
                    </div>
                    <!-- End Example Toolbar -->
                </div>
            </div>
        </div>
    </div>
    <!-- End Panel Other -->
</div>
@section footSection{
    <script>
        var $table, options;
        var recordManager = {
            //1.0 初始化页面
            initPage: function () {
                parent.showLoadBoxs();
                recordManager.initTable();
                recordManager.bindEvent();
                parent.delLoadBoxs();
            },
            //1.1 初始化Table
            initTable: function () {
                options = {
                    url: ctx + "/VLinesManager/GetRecordList",
                    cutHeight: 5,
                    showRefresh: false,
                    showToggle: false,
                    showColumns: false,
                    toolbar: "#exampleToolbar",
                    queryParams: function (params) {
                        params = {
                            rows: params.limit,
                            //页面大小  
                            page: params.offset / params.limit + 1,
                            userName:$('#userName').val(), //($('#userName').val()) ? encodeURI($('#userName').val()) : "",//用户名、登录名
                            fileName:$('#fileName').val(), //($('#fileName').val()) ? encodeURI($('#fileName').val()) : "",//体验作品
                            fileCode: $('#fileCode').val() //($('#fileCode').val()) ? encodeURI($('#fileCode').val()) : "",//体验项目
                        }
                        return params;
                    },
                    columns: [
                    {
                        radio: true
                    }, {
                        field: '',//第一列序号
                        title: '序号',
                        align: 'center',
                        width: 50,
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    },
                    {
                        field: 'user_name',
                        title: '用户名',
                        align: 'center'
                    },
                    {
                        field: 'file_code',
                        title: '作品代码',
                        align: 'center'
                    },
                    {
                        field: 'file_name',
                        title: '作品名称',
                        align: 'center'
                    }, {
                        field: 'em_time',
                        title: '体验时长',
                        align: 'center'
                    },
                    {
                        field: 'in_date',
                        title: '进入时间',
                        align: 'center'
                    }, {
                        field: 'out_date',
                        title: '退出时间',
                        align: 'center'
                    }],
                    onClickRow: function (row, $element) {
                    }
                }
                $table = tableHelper.initTable("exampleTableToolbar", options);
            },
            //绑定默认事件
            bindEvent: function () {
                //查询
                $('#btnSearch').click(function () {
                    $table.bootstrapTable('refresh', options);
                });
                //删除记录
                $('#experDel').on('click', function () {
                    var row = $table.bootstrapTable('getSelections');
                    if (row != null && row.length == 0) {
                        layer.msg("未选中记录行~", { icon: 5 });
                        return false;
                    }
                    layer.confirm('您确定要删除当前选中体验记录？', {
                        btn: ['确定', '取消'] //按钮
                    }, function () {
                        $.ajax({
                            type: 'post',
                            url: ctx + '/VLinesManager/DelExperById/' + row[0].er_id,
                            dataType: 'json',
                            async: false,
                            success: function (data) {
                                if (data.Statu === 0) {
                                    layer.msg("删除成功...");
                                    $table.bootstrapTable('refresh', options);
                                }
                                else
                                    layer.msg(data.Msg, { icon: 5 });
                            }
                        });
                    }, function () { });                  
                });
            }
        }
        $(function () {
            recordManager.initPage();
        });
    </script>
}